<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet"  href="../css/styles.css" />
    <title>上传文件</title>
    <style>
        .school:hover{
            cursor: pointer;
            background: #000;
        }
        .cho-sch{
            position: absolute;
            top:50%;
            left:50%;
            z-index:2000;
            background-color: #f8f8f8;;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            /*-webkit-transform:translateY(-50%);*/
            display: none;
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,0.3);
            display: none;
            z-index:1000;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><span>Print</span>Cloud</a>

                <ul class="user-menu" style="margin:0;height:50px;line-height:50px;" >

                    <li class="dropdown pull-right" style="display: inline-block;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">
                            </span> User <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>-->
                            <!--<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>-->
                            <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                        </ul>
                    </li>
                    <li style="display: inline-block;margin:0 30px 0 0;padding:0;height: 100%;">
                        <p class="push-right school" style="color:white;text-align: center"  >
                            山东大学
                        </p>
                    </li>
                </ul>
            </div>

        </div><!-- /.container-fluid -->
    </nav>

    <div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
        <!--<form role="search">-->
            <!--<div class="form-group">-->
                <!--<input type="text" class="form-control" placeholder="Search">-->
            <!--</div>-->
        <!--</form>-->
        <ul class="nav menu">
            <li class="parent active">
                <a href="#">
                    <span class="glyphicon glyphicon-book"></span> 文档打印
                    <!--<span data-toggle="collapse" href="#sub-item-1" class="icon pull-right">-->
                        <!--<em class="glyphicon glyphicon-s glyphicon-plus"></em>-->
                    <!--</span>-->
                </a>
                <!--<ul class="children collapse" id="sub-item-1">-->
                    <!--<li>-->
                        <!--<a class="" href="Manage.html">-->
                            <!--<span class="glyphicon glyphicon-share-alt"></span> 用户登记-->
                        <!--</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a class="" href="ChangeRoom.jsp">-->
                            <!--<span class="glyphicon glyphicon-share-alt"></span> 修改用户信息-->
                        <!--</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a class="" href="CustomerInfo.jsp">-->
                            <!--<span class="glyphicon glyphicon-share-alt"></span> 当前住宿信息-->
                        <!--</a>-->
                    <!--</li>-->
                <!--</ul>-->
            </li>
            <!--
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    用户管理 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">用户登记</a></li>
                    <li><a href="#">换房</a></li>
                    <li class="divider"></li>
                    <li><a href="#">当前住宿信息</a></li>
                </ul>
            </li>
            -->
            <li class="parent">
                <a href="uploadImage.html">
                    <span class="glyphicon glyphicon-picture"></span> 照片打印 </a>
            </li>
            <li class="parent ">
                <a href="order.html">
                    <span class="glyphicon glyphicon-list"></span> 我的订单 </a>
            </li>

            <li class="parent ">
                <a href="personInfo.html">
                    <span class="glyphicon glyphicon-user"></span> 个人信息 </a>
            </li>

            <li class="parent ">
                <a href="download.html">
                    <span class="glyphicon glyphicon-cloud-download"></span> 文件下载
                </a>
            </li>

            <li role="presentation" class="divider"></li>
            <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Login Page</a></li>
        </ul>
        <!--<div class="attribution">Created by <a href="http://www.medialoot.com/item/lumino-admin-bootstrap-template/">Jian  Liu</a></div>-->
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                <li class="active">文档打印</li>
            </ol>
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading" style="height:60px;line-height:40px;font-size: 18px;color:#14a6ef;">
                        选择文件上传
                    </div>
                    <div class="panel-body" style="height:100%;">
                        <div id="upload" style="border:1px solid #3385ff">
                            <div id="drop-area" style="height:130px;text-align: center;line-height:130px;font-size: 40px;
                                color:gray;background-color: #fafafa;margin:15px;
                             " >将文档拖拽到此区域</div>
                            <div id="upload-wrap" style=" position: relative;
                                                                width: 158px;
                                                                height: 43px;
                                                                font-size: 16px;
                                                                border: 1px solid #cacbcc;
                                                                line-height: 43px;
                                                                margin: 2px auto;
                                                                color: #333;
                                                                text-align: center;">
                                <input type="file" class="upload-doc" id="upload-doc"
                                       style=" position: absolute;
                                                font-size: 0;
                                                width: 100%;
                                                height: 100%;
                                                outline: 0;
                                                opacity: 0;
                                                /*margin-left: 0;*/
                                                z-index: 1;
                                                cursor: pointer;"
                                       value="上传文档">
                                <i class="glyphicon glyphicon-cloud-upload"
                                        style="position: relative;
                                                top: 2px;
                                                width: 18px;
                                                height: 18px;
                                                margin-right: 8px;
                                                background-position: -144px 0;"
                                        ></i>
                                <span class="upload-text">本地上传文档</span>
                            </div>
                        </div>
                        <form class="form-horizontal" role="form" action="upload.php" method="post">
                        <div id="preview">

                        </div>
                        <div id="order-info">
                            <div class="panel panel-info" style='margin-top:10px;border:1px solid #14a6ef;'>
                                <div class="panel-heading"  style='height:40px;line-height:20px;font-size: 14px;font-weight:500;color:#14a6ef;'>
                                    确认订单
                                </div>

                                    <div class="panel-body row" style="height:100%;">
                                       <div class="col-md-6" style="font-size: 16px;">
                                           <div class="col-md-6"  style="padding-top:5px;">
                                               <label class=" checkbox-inline">
                                                   <input type="radio" name="isfast" id="isfast2" value="0" checked>不加急
                                               </label>
                                           </div>
                                           <div class="col-md-6"  style="padding-top:5px;">
                                                <label class=" checkbox-inline">
                                                    <input type="radio" name="isfast" id="isfast1" value="1" >加急
                                                </label>
                                           </div>

                                           <div class="col-md-6"  style="padding-top:13px;">
                                               <label class=" checkbox-inline">
                                                   <input type="radio" name="ispayonline" id="ispayonline1" value="0" checked >在线支付
                                               </label>
                                           </div>
                                           <div class="col-md-6"  style="padding-top:13px;">
                                               <label class=" checkbox-inline">
                                                   <input type="radio" name="ispayonline" id="ispayonline2" value="1" >货到付款
                                               </label>
                                           </div>

                                           <div class="col-md-6"   style="padding-top:13px;">
                                               <label class=" checkbox-inline">
                                                   <input type="radio" name="isdelivery" id="isdelivery1" value="0" checked >送货上门
                                               </label>
                                           </div>
                                           <div class="col-md-6"   style="padding-top:13px;">
                                               <label class=" checkbox-inline">
                                                   <input type="radio" name="isdelivery" id="isdelivery2" value="1" >到店自取
                                               </label>
                                           </div>
                                           <!--<div class="form-group">-->
                                               <!--<label class="col-md-4 control-label" style="font-size:12px;">送货上门</label>-->
                                               <!--<div class="col-md-4">-->
                                                   <!--<select class="form-control">-->
                                                       <!--<option value="0">今天</option>-->
                                                       <!--<option value="1">明天</option>-->
                                                   <!--</select>-->
                                               <!--</div>-->
                                               <!--<div class="col-md-4">-->
                                                   <!--<select class="form-control">-->
                                                       <!--<option value="0">今天</option>-->
                                                       <!--<option value="1">明天</option>-->
                                                   <!--</select>-->
                                               <!--</div>-->
                                       </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="col-md-3" style="margin-right:-20px;">
                                                    <label for="phone" class="control-label">手机号：</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control" name="phone" id="phone" placeholder="手机号" required>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="col-md-3" style="margin-right:-20px;">
                                                    <label for="address" class="control-label">地址：</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control" name="address" id="address" placeholder="地址" required>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="col-md-3" style="margin-right:-20px;">
                                                    <label for="beizhu" class="control-label">备注：</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control" name="beizhu" id="beizhu" placeholder="备注">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4" id="allprice">

                                        </div>
                                        <div class="col-md-4">
                                            <input  type="submit" class="btn btn-primary  btn-block" id="sub_order" value="提交订单">
                                        </div>
                                        <div class="col-md-4"></div>
                                    </div>

                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <!--<div class="panel panel-info" style="margin:0 20px 0;">-->
                    <!--<div class="panel-heading"  style='height:40px;line-height:20px;font-size: 14px;font-weight:500;color:#14a6ef;' >-->
                        <!--结算-->
                    <!--</div>-->
                    <!--<div class="panel-body">-->
                        <!--<table class="table table-striped table-bordered">-->
                            <!--<thead>-->
                            <!--<tr>-->
                                <!--<th>类型</th>-->
                                <!--<th>总张数</th>-->
                                <!--<th>单价/张</th>-->
                                <!--<th>小计</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                            <!--<tbody id="tbody">-->
                            <!--</tbody>-->
                        <!--</table>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>

    </div>

    <div class="cho-sch" style="height: 225px;width:800px;text-align: center;font-weight: 400;color: #333;font-size: 1.6rem;line-height: 1.6;">
        <div class="row">
            <div class="col-md-12 ">学校选择
                <br>
                <br>
            </div>
            <div class="col-md-12 ">
                <ul  id="select_school_id" style="list-style: none;text-align: left;">
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=1&amp;page_type=1">东北农业大学</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=2&amp;page_type=1">哈尔滨工业大学</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=3&amp;page_type=1">东北林业大学</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=4&amp;page_type=1">牡丹江师范学院</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=5&amp;page_type=1">牡丹江医学院</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=6&amp;page_type=1">哈尔滨金融学院</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=7&amp;page_type=1">黑龙江大学</a></li>
                    <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=8&amp;page_type=1">齐齐哈尔大学</a></li>
                    </ul>
                </div>
        </div>
    </div>

    <div class="mask"></div>

    <script src="../bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script>
        !function ($) {
            $(document).on("click","ul.nav li.parent > a > span.icon", function(){
                $(this).find('em:first').toggleClass("glyphicon-minus");
            });
            $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
        }(window.jQuery);

         $(window).on('resize', function () {
			  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
			});
         $(window).on('resize', function () {
			  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
			})

    </script>
    <script>
        $('.school').click(function(){
            $('.mask').show();
            $('.cho-sch').css('display','block');
        });
        $('.mask').click(function(){
            $('.mask').hide();
            $('.cho-sch').css('display','none');
        });

        var fd = new FormData();
        console.log("test");

        function closeHandle(e){
            var epp= $(e).parent().parent();
            var n=$(e).prev().data("name");
            $(epp).remove();  //隐藏文件的预览
            console.log(n);
            $.ajax({
                url: 'upload.php',
                type: 'POST',
                data: {
                    name:n,
                    value:1
                },
                success: function(res) {
                    console.log("aa"+res);
                },
                error: function(res) {
                    console.log(res);
                }
            });
        }

        function showallprice(){
            var pre = document.getElementById("preview");
            var listpanel=pre.getElementsByClassName("panel");
            var allprice=0;
            for(let i =0;i<listpanel.length;i++){
                let price=listpanel[i].getElementsByClassName("price")[0].value;//获取一份的张数
                price=parseFloat(price);
                allprice = allprice+price;
            }
            var str="<p style='color:red;font-weight: 900;margin-top:7px;margin-left:30px;'>共计："+allprice.toFixed(2)+"元</p>";
            $("#allprice").html(str);
        }

        function changePrice(e){
            var pl=e.parentNode.parentNode;
  //          console.log(pl.getElementsByClassName("price")[0].value);//
            let color_type=$(pl.getElementsByClassName("color-type")).find("option:selected").val();//获取黑白或者彩色
                let paper_type=$(pl.getElementsByClassName("paper-type")).find("option:selected").val();//获取单面或者双面
                let part_num = pl.getElementsByClassName("part-num")[0].value;//获取份数
                let cover_num = pl.getElementsByClassName("cover-num")[0].value;//获取一份的张数

                var price=0;
                if(color_type==0&&paper_type==0){
                    price=0.1*part_num*cover_num;
                }else if(color_type==0&&paper_type==1){
                    price=0.09*part_num*cover_num;
                }else if(color_type==1&&paper_type==0){
                    price=1.0*part_num*cover_num;
                }else{
                    price=0.9*part_num*cover_num;
                }

            pl.getElementsByClassName("price")[0].value=price.toFixed(2);
            showallprice();
        }

        function AjaxUpload(){
            //上传
            $.ajax({
                url: 'upload.php',
                type: 'POST',
                processData: false,
                data: fd,
                success: function(res) {
                    console.log("aa"+res);
                },
                error: function(res) {
                    console.log("ss"+res);
                }
            });
        }

        function showFile(files){
            var filename = files[0].name; //文件名称
            var filesize = Math.floor((files[0].size)/1024);
            var length = files.length;
            if(length == 0){
                return false;
            }
            var allowedFileTypes=["docx","doc","pdf","txt"];
            var s=filename.lastIndexOf(".");
            var suffix=filename.substr(s+1);

            if (allowedFileTypes.indexOf(suffix) === -1) {
                alert("您上传的文件类型不符合哦！");
                return false;
            }

            //检测文件是不是图片
//                if(files[0].type.indexOf('image') === -1){
//                    alert("您拖的不是图片！");
//                    return false;
//                }
            //拖拉图片到浏览器，可以实现预览功能
            //  var img = window.webkitURL.createObjectURL(fileList[0]);

            //判断上传的文件是否是重复的
            var pre = document.getElementById("preview");
            var listP=pre.getElementsByTagName("p");
            for(let i = 0;i<listP.length;i++){
                if(filename==$(listP[i]).data('name')){
                    if(filesize==$(listP[i]).data('size')){
                        alert("不要上传重复文件哦");
                        return false;
                    }
                }
            }
//                if(filesize>500){
//                    alert("上传大小不能超过500K.");
//                    return false;
//                }
            var str = //"<p>文件名称："+filename+"</p><p>大小："+filesize+"KB</p>" +
                    "<div class='panel panel-info' style='margin-top:10px;border:1px solid #14a6ef;'>"+
                    "<div class='panel-heading' style='height:40px;line-height:20px;font-size: 12px;color:#14a6ef;'>"+
                        "<p data-name="+filename+" data-size="+filesize+" style='display:inline;'>文件名称："+filename+"&nbsp;&nbsp;大小："+filesize+"KB</p>"+
                        "<a href='javascript:;' onclick='closeHandle(this)'><i class='glyphicon glyphicon-remove pull-right'></i></a>"+
                    "</div>"+
                    "<div class='panel-body row' style='height:60px;'>"+
                    "<input type='hidden' name='filename' value="+filename+" >"+
                    "<input type='hidden' name='filesize' value="+filesize+" >"+
                    "<div class='col-md-2'><select class='color-type' name='color_type' style='vertical-align: middle;height:30px;width:70px;' onchange='changePrice(this)'><option value='0'>黑白</option><option value='1'>彩色</option> </select></div>"+
                    "<div class='col-md-2'><select class='paper-type' name='paper_type' style='vertical-align: middle;height:30px;width:70px;' onchange='changePrice(this)'><option value='0'>单面</option><option value='1'>双面</option> </select></div>"+
                    "<div class='col-md-2'><input type='number' name='part_num' onchange='changePrice(this)' class='part-num' style='vertical-align: middle;height:30px;width:70px;' value='1' placeholder='份数'>&nbsp;&nbsp;份</div>"+
          //          "<div class='col-md-1' style='line-height:30px;padding-left: 0;'>份</div>"+
                    "<div class='col-md-2'><input type='number' name='cover_num' onchange='changePrice(this)' class='cover-num pull-right' style='vertical-align: middle;height:30px;width:70px;'  value='1' disabled ></div>"+
                    "<div class='col-md-1' style='line-height:30px;padding-left: 0;' >张/份</div>"+
               //     "<div class='col-md-1' style='line-height:30px;padding-left: 0;' >小计：</div>"+
                    "<div class='col-md-3'>小计：￥<input type='number' class='price' name='price' style='vertical-align: middle;height:30px;width:70px;'  value='0.10' disabled ></div>"+
                    "</div>"+
                    "</div>";
            $("#preview").append(str);
            showallprice();
            return true;
        }



        $(function(){

            //阻止浏览器默认行。
            $(document).on({
                dragleave:function(e){    //拖离
                    e.preventDefault();
                },
                drop:function(e){  //拖后放
                    e.preventDefault();
                },
                dragenter:function(e){    //拖进
                    e.preventDefault();
                },
                dragover:function(e){    //拖来拖去
                    e.preventDefault();
                }
            });

            var box = document.getElementById('drop-area'); //拖拽区域
            box.addEventListener("drop",function(e){
                e.preventDefault(); //取消默认浏览器拖拽效果
                var fileList = e.dataTransfer.files; //获取文件对象
                if(showFile(fileList)){
                    if(fd==null){
                        var fd = new FormData();
                        console.log("new formdata");
                    }
                    console.log("old formdata.");
                    fd.append('mydoc', fileList[0]);//+index
                    console.log(fd.getAll("mydoc"));
                    //上传
                    AjaxUpload();
                }
            },false);

            $('#upload-doc').on("change",function(){
                var fileList = this.files;
                console.log(fd);
                if(showFile(fileList)){
                    if(fd==null){
            //            var fd = new FormData();
                        console.log("new formdata");
                        console.log(fd);
                    }
                        console.log("old formdata.");
                        fd.append('mydoc', fileList[0]);//+index
                        console.log(fd.getAll("mydoc").length);
                    //上传
                    AjaxUpload();
                }
                $(this).val('');
            });

        });

    </script>
</body>

</html>
